import { defineComponent, ref, computed, watch, onMounted, markRaw } from "vue";
import * as echarts from 'echarts';
import { getSvcTrend, getEvtTrend } from '@/api/statistics'
import '../style.scss'

export default defineComponent({
	name: 'InvokeTrend',
	props: {
		time: {
			type: Object,
			default: () => { }
		},
		code: { // 地区code
			type: String,
			default: '330300'
		},
		refresh: {
			type: Number,
		}
	},
	setup(props) {
		const chartEl = ref(null);
		const myChart = ref(null);


		const chartData = ref([])
		const xAxisData = ref([])
		const chart2Data = ref([])
		const option = computed(() => {
			return {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					}
				},
				grid: {
					left: '20',
					right: '20',
					top: '20%',
					bottom: '20',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: xAxisData.value,
					axisLine: {
						show: false,

					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						fontSize: 12,
						color: 'rgba(133, 208, 235, 1)'
					},
				},
				legend: {
					top: '4%',
					right: '15%',
					show: true,
					itemWidth: 8,
					itemHeight: 8,
					data: [{
						name: '服务调用趋势',
						icon: 'circle',
						textStyle: {
							color: 'rgba(42, 242, 252, 1)'
						},
						itemStyle: {
							color: 'rgba(42, 242, 252, 1)'
						}
					}, {
						name: '事件推送调用趋势',
						icon: 'circle',
						itemStyle: {
							color: 'rgba(46, 105, 235, 1)'
						},
						textStyle: {
							color: 'rgba(42, 242, 252, 1)'
						}
					}]
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: 'rgba(189,221,255,0.15)',
						},
					},
					axisTick: {
						show: false,
					},
					splitNumber: 3,
					axisLabel: {
						color: 'rgba(133, 208, 235, 1)',
						fontSize: 12,
					},
					// boundaryGap: ['20%', '20%'],
				},
				series: [
					{
						name: '服务调用趋势',
						type: 'line',
						data: chartData.value,
						symbolSize: 1,
						symbol: 'circle',
						smooth: true,
						showSymbol: false,
						lineStyle: {
							width: 2,
							color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(255, 255, 255, 1)',
								},
								{
									offset: 0.4,
									color: 'rgba(42, 242, 252, 1)',
								},
								{
									offset: 1,
									color: 'rgba(42, 242, 252, 1)',
								},
							], false),
							shadowColor: 'rgba(42, 242, 252, 0.3)',
							shadowBlur: 2,
							shadowOffsetY: 6,
						},
						// itemStyle: {
						// 	normal: {
						// 		color: colorList[0],
						// 		borderColor: colorList[0],
						// 	},
						// },
					},
					{
						name: '事件推送调用趋势',
						type: 'line',
						data: chart2Data.value,
						symbolSize: 1,
						symbol: 'circle',
						smooth: true,
						showSymbol: false,
						lineStyle: {
							width: 2,
							color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(255, 255, 255, 1)',
								},
								{
									offset: 0.4,
									color: 'rgba(46, 105, 235, 1)',
								},
								{
									offset: 1,
									color: 'rgba(46, 105, 235, 1)',
								},
							], false),
							shadowColor: 'rgba(46, 105, 235, 0.3)',
							shadowBlur: 2,
							shadowOffsetY: 6,
						},
					},
				],
			};
		});

		const getData = async () => {
			const { endDate, startDate } = props.time

			const diff = (new Date(endDate).getTime() - new Date(startDate).getTime()) / 86400000
			let type = 0
			if (diff <= 31) {

			} else
				switch (true) {
					case diff <= 31:
						type = 0;
						break;
					case diff > 31 && diff <= 366:
						type = 1;
						break;
					case diff > 366:
						type = 2;
						break;
				}
			const para = {
				areaCode: props.code,
				endDate,
				startDate,
				type
			}
			const res2 = await getEvtTrend(para);
			if (res2.status === 200) {
				chart2Data.value = res2.data.y
				xAxisData.value = res2.data.x

			}
			const res = await getSvcTrend(para);
			if (res.status === 200) {
				chartData.value = res.data.y
			}
		};

		// 初始化echarts相关配置
		const init = () => {
			myChart.value = markRaw(echarts.init(chartEl.value));
			myChart.value.setOption(option.value);

		};
		watch(() => props.refresh, () => {
			getData()
		});
		watch(() => props.code, () => {
			getData()
		});
		watch(() => chartData.value, () => {
			myChart.value.clear()
			myChart.value.setOption(option.value);
		});
		
		onMounted(() => {
			init();
		});


		

		return () => <div ref={chartEl} style={{ width: '100%', height: '100%' }} />
	}
})